CSS Sayaç Stili Dil Desteği: Küresel Kitleler İçin Uluslararasılaştırma Biçimlendirmesi

Günümüzün küresel olarak bağlantılı dünyasında, web geliştiricilerinin farklı kitlelere hitap eden web siteleri ve uygulamalar oluşturmaları gerekiyor. Bu, yalnızca dili değil, aynı zamanda farklı bölgelerde kullanılan kültürel gelenekleri ve numaralandırma sistemlerini de dikkate almak anlamına geliyor. CSS sayaç stilleri, listeleri ve diğer numaralandırılmış içerikleri bu kültürel nüanslara saygı gösterecek şekilde biçimlendirmek için güçlü bir mekanizma sağlar. Bu kapsamlı kılavuz, uluslararasılaştırma (i18n) için CSS sayaç stillerinin yeteneklerini keşfedecek ve bunların nasıl etkili bir şekilde kullanılacağını gösterecektir.

CSS Sayaç Stillerini Anlamak

CSS sayaçları, kaç kez kullanıldıklarını izlemek için CSS kuralları tarafından tutulan değişkenlerdir. Öncelikle listeleri, başlıkları ve diğer öğeleri numaralandırmak için kullanılırlar. CSS sayaç stilleri, standart Arap ve Roma rakamlarının ötesinde özel numaralandırma sistemleri tanımlamanıza olanak tanıyarak bu işlevselliği genişletir. Bu, farklı dilleri ve kültürel tercihleri desteklemek için çok önemlidir.

Sayaç stillerini kullanmaya dahil olan temel CSS özellikleri şunlardır:

• counter-reset: Bir sayacı belirli bir değere başlatır veya sıfırlar.
• counter-increment: Bir sayacın değerini artırır.
• content: Sayacın değerini görüntülemek için ::before veya ::after sözde öğeleriyle birlikte kullanılır.
• counter() veya counters(): Sayacın değerini biçimlendirmek için content özelliği içinde kullanılan işlevler.
• @counter-style: Biçimlendirmeyi kontrol etmek için çeşitli özelliklere sahip özel bir sayaç stili tanımlar.

@counter-style'ın Gücü

@counter-style kuralı, CSS sayaç stili uluslararasılaştırmasının kalbidir. Sayaç değerinin nasıl işleneceğini kontrol eden çeşitli özelliklere sahip özel bir numaralandırma sistemi tanımlamanıza olanak tanır. @counter-style kuralı içindeki temel özellikleri inceleyelim:

• system: Sayaç gösterimini oluşturmak için kullanılan algoritmayı belirtir. Yaygın değerler arasında cyclic, numeric, alphabetic, symbolic, fixed ve additive bulunur.
• symbols: Sayılar, harfler veya özel karakterler gibi sayaç stili tarafından kullanılan sembolleri tanımlar.
• additive-symbols: Sembolleri ve bunlara karşılık gelen sayısal değerleri tanımlamak için additive sistemiyle birlikte kullanılır.
• suffix: Her sayaç gösteriminden sonra eklenen metni belirtir (örneğin, bir nokta veya kapanış parantezi).
• prefix: Her sayaç gösteriminden önce eklenen metni belirtir.
• range: Sayaç stilinin uygulanabileceği değer aralığını kısıtlar.
• pad: Gerekirse baştaki sıfırlarla doldurarak kullanılacak minimum basamak sayısını belirtir.
• speak-as: Erişilebilirlik için ekran okuyucular tarafından sayaç değerinin nasıl duyurulacağını kontrol eder.
• fallback: Tarayıcı tarafından desteklenmiyorsa kullanılacak bir geri dönüş sayaç stili belirtir.

@counter-style ile Uluslararasılaştırma Örnekleri

Şimdi, farklı diller ve kültürel bağlamlar için sayaçları biçimlendirmek üzere @counter-style kullanımına ilişkin bazı pratik örnekleri inceleyelim.

1. Arap-Hint Rakamlarıyla Arap Rakamları

Arap rakamları (0-9) yaygın olarak kullanılsa da, birçok Arapça konuşulan bölge Arap-Hint rakamlarını (٠‎-٩‎) kullanmayı tercih eder. Bunu başarmak için bir sayaç stili oluşturabiliriz:

@counter-style arabic-indic {
  system: numeric;
  symbols: '٠' '١' '٢' '٣' '٤' '٥' '٦' '٧' '٨' '٩';
  suffix: '. ';
}

ol {
  list-style: none;
  counter-reset: item;
}

ol li {
  counter-increment: item;
}

ol li::before {
  content: counter(item, arabic-indic);
}

Bu kod, Arap-Hint rakamlarını sembol olarak kullanan arabic-indic adlı bir sayaç stili tanımlar. suffix özelliği, her sayıdan sonra bir nokta ve bir boşluk ekler. CSS daha sonra bu stili sıralı bir listeye (<ol>) uygulayarak sayıları Arap-Hint biçiminde görüntüler.

2. Roma Rakamları (Büyük ve Küçük Harf)

Roma rakamları çeşitli bağlamlarda yaygın olarak kullanılır ve CSS sayaç stilleri bunları kolayca işleyebilir:

@counter-style upper-roman {
  system: upper-roman;
}

@counter-style lower-roman {
  system: lower-roman;
}

ol.upper-roman {
  list-style: none;
  counter-reset: item;
}

ol.upper-roman li {
  counter-increment: item;
}

ol.upper-roman li::before {
  content: counter(item, upper-roman) '. ';
}

ol.lower-roman {
  list-style: none;
  counter-reset: item;
}

ol.lower-roman li {
  counter-increment: item;
}

ol.lower-roman li::before {
  content: counter(item, lower-roman) '. ';
}

Bu örnek, hem büyük harf (upper-roman) hem de küçük harf (lower-roman) Roma rakamı sayaç stillerinin nasıl oluşturulacağını gösterir. Daha sonra bu stilleri CSS sınıflarını (.upper-roman ve .lower-roman) kullanarak farklı listelere uygulayabilirsiniz. Örneğin:

<ol class="upper-roman">
  <li>Öğe 1</li>
  <li>Öğe 2</li>
  <li>Öğe 3</li>
</ol>

<ol class="lower-roman">
  <li>Öğe 1</li>
  <li>Öğe 2</li>
  <li>Öğe 3</li>
</ol>

3. Gürcü Rakamları

Gürcü rakamları benzersiz bir harf sistemi kullanır. Sayıları Gürcüce olarak temsil etmek için bir sayaç stili tanımlayabiliriz:

@counter-style georgian {
  system: fixed;
  symbols: 'ა' 'ბ' 'გ' 'დ' 'ე' 'ვ' 'ზ' 'თ' 'ი' 'კ' 'ლ' 'მ' 'ნ' 'ო' 'პ' 'ჟ' 'რ' 'ს' 'ტ' 'უ' 'ფ' 'ქ' 'ღ' 'ყ' 'შ' 'ჩ' 'ც' 'ძ' 'წ' 'ჭ' 'ხ' 'ჯ' 'ჰ';
  suffix: '. ';
  range: 1 33;
}

ol.georgian {
  list-style: none;
  counter-reset: item;
}

ol.georgian li {
  counter-increment: item;
}

ol.georgian li::before {
  content: counter(item, georgian);
}

Bu örnek, Gürcü numaralandırma sisteminin ilk 33 sayı için sınırlı bir sembol kümesine sahip olması nedeniyle fixed sistemini kullanır. range özelliği, sayaç stilini 1 ile 33 arasındaki değerlerle kısıtlar. 33'ten büyük sayılar için, daha karmaşık bir mantık veya farklı bir numaralandırma sistemi uygulamanız gerekir.

4. Ermeni Rakamları

Gürcüce'ye benzer şekilde, Ermeni rakamları da sayıları temsil etmek için harfleri kullanır:

@counter-style armenian {
  system: fixed;
  symbols: 'Ա' 'Բ' 'Գ' 'Դ' 'Ե' 'Զ' 'Է' 'Ը' 'Թ' 'Ժ' 'Ի' 'Լ' 'Խ' 'Ծ' 'Կ' 'Հ' 'Ձ' 'Ղ' 'Ճ' 'Մ' 'Յ' 'Ն' 'Շ' 'Ո' 'Չ' 'Պ' 'Ջ' 'Ռ' 'Ս' 'Վ' 'Տ' 'Ր' 'Ց' 'Ւ' 'Փ' 'Ք' 'Օ' 'Ֆ';
  suffix: '. ';
  range: 1 39;
}

ol.armenian {
  list-style: none;
  counter-reset: item;
}

ol.armenian li {
  counter-increment: item;
}

ol.armenian li::before {
  content: counter(item, armenian);
}

Bu örnek, fixed sistemini kullanarak ve Ermeni harflerini sembol olarak tanımlayarak Gürcü örneğine benzer. range, temel Ermeni rakam kümesini kapsayan 1-39 olarak ayarlanmıştır.

5. CJK Rakamları (Çince, Japonca, Korece)

CJK rakamları, resmi ve gayri resmi bağlamlar için farklı biçimler ve değişen düzeylerde ayrıntı düzeyi ile daha fazla karmaşıklık sunar. Basitleştirilmiş Çince'ye bakalım:

@counter-style simplified-chinese {
  system: numeric;
  symbols: '一' '二' '三' '四' '五' '六' '七' '八' '九';
  suffix: '';
}

@counter-style simplified-chinese-formal {
  system: fixed;
  symbols: '零' '壹' '贰' '叁' '肆' '伍' '陆' '柒' '捌' '玖';
  suffix: '';
}

ol.simplified-chinese {
  list-style: none;
  counter-reset: item;
}

ol.simplified-chinese li {
  counter-increment: item;
}

ol.simplified-chinese li::before {
  content: counter(item, simplified-chinese) '、';
}

ol.simplified-chinese-formal {
  list-style: none;
  counter-reset: item;
}

ol.simplified-chinese-formal li {
  counter-increment: item;
}

ol.simplified-chinese-formal li::before {
  content: counter(item, simplified-chinese-formal) '、';
}

Bunun basitleştirilmiş bir gösterim olduğuna dikkat edin. Tam CJK rakam desteği, özellikle daha büyük sayılar için, additive sistemini ve yer değerlerini (onlar, yüzler, binler vb.) içeren daha karmaşık bir uygulama gerektirecektir. Bu kod, temel sayısal gösterimi gösterir.

Gelişmiş Teknikler ve Dikkate Alınması Gerekenler

1. Sayaç Stillerini Birleştirme

Daha karmaşık numaralandırma şemaları oluşturmak için birden çok sayaç stilini birleştirebilirsiniz. Örneğin, bölümler için birincil bir sayaç ve her bölüm içindeki alt bölümler için ikincil bir sayaç kullanabilirsiniz.

body {
  counter-reset: chapter section;
}

h1 {
  counter-increment: chapter;
  counter-reset: section;
}

h2 {
  counter-increment: section;
}

h1::before {
  content: counter(chapter) '. ';
}

h2::before {
  content: counter(chapter) '.' counter(section) '. ';
}

Bu kod, bölümlerin sırayla numaralandırıldığı ve alt bölümlerin her bölüm içinde numaralandırıldığı (örneğin, 1.1, 1.2, 2.1, 2.2) hiyerarşik bir numaralandırma sistemi oluşturur.

2. Erişilebilirlik Hususları

Sayaç stillerinizin engelli kullanıcılar için erişilebilir olduğundan emin olun. Sayaç değerinin ekran okuyucular tarafından nasıl duyurulacağını kontrol etmek için speak-as özelliğini kullanın. Örneğin:

@counter-style my-style {
  system: numeric;
  symbols: '1' '2' '3';
  speak-as: numbers;
}

speak-as: numbers; özelliği, ekran okuyucuya sayaç değerini sayı olarak duyurmasını söyler. Diğer seçenekler arasında spell-out (sayıyı hecelemek için) ve bullets (sayacı madde işareti olarak duyurmak için) bulunur.

Ek olarak, sayaç stillerinizde kullanılan özel semboller için alternatif metin veya açıklamalar sağlayarak görme engelli kullanıcıların numaralandırılmış içeriğin anlamını anlayabilmelerini sağlayın.

3. Tarayıcı Uyumluluğu

CSS sayaç stilleri modern tarayıcılar tarafından yaygın olarak desteklenirken, eski tarayıcı sürümlerini dikkate almak önemlidir. Tarayıcı birincil stili desteklemiyorsa kullanılacak bir geri dönüş sayaç stili belirtmek için fallback özelliğini kullanın. Örneğin:

@counter-style my-style {
  system: cyclic;
  symbols: '✓' '✗';
  fallback: disc;
}

Bu örnekte, tarayıcı cyclic sistemini veya özel sembolleri desteklemiyorsa, disc liste stiline geri dönecektir.

4. Kültürel Hassasiyet

Farklı diller ve kültürler için sayaç stilleri uygularken, kültürel hassasiyetlere dikkat edin. Her bölgede kullanılan uygun numaralandırma kurallarını ve sembollerini araştırın. Rahatsız edici veya uygunsuz olabilecek semboller veya biçimler kullanmaktan kaçının.

Örneğin, bazı kültürler numaralandırma sistemlerinde farklı noktalama işaretleri veya ayırıcılar kullanmayı tercih edebilir. Sayaç stillerinizin bu tercihlere saygı duyduğundan emin olun.

Pratik Uygulamalar ve Kullanım Durumları

CSS sayaç stilleri, aşağıdakiler dahil olmak üzere çok çeşitli web geliştirme senaryolarında kullanılabilir:

• İçindekiler tablosu oluşturma: Bir içindekiler tablosundaki başlıkları ve alt başlıkları otomatik olarak numaralandırın.
• Numaralı listeler oluşturma: Numaralı listeleri farklı dillerde ve stillerde biçimlendirin.
• Bir öğreticideki adımları numaralandırma: Açık ve görsel olarak çekici numaralandırma ile kullanıcılara bir dizi adımda rehberlik edin.
• Özel sayfalama uygulama: Benzersiz numaralandırma şemalarına sahip özel sayfalama kontrolleri oluşturun.
• Sıralanmış listeleri görüntüleme: Farklı sayaç stilleri kullanarak sıralamaları görsel olarak ilgi çekici bir şekilde gösterin.
• Yasal belgeler oluşturma: Belirli numaralandırma gereksinimlerine sahip yasal belgeleri biçimlendirin.
• Bilimsel makaleleri biçimlendirme: Denklemleri, şekilleri ve tabloları uygun numaralandırma ile görüntüleyin.

CSS Sayaç Stillerini Kullanmak İçin En İyi Uygulamalar

CSS sayaç stillerinizin etkili ve sürdürülebilir olduğundan emin olmak için şu en iyi uygulamaları izleyin:

• Sayaç stilleriniz için açıklayıcı adlar kullanın: Stilin amacını ve biçimlendirmesini açıkça gösteren adlar seçin (örneğin, arabic-indic, upper-roman, georgian).
• Sayaç stillerinizi modüler tutun: Farklı diller ve numaralandırma sistemleri için ayrı sayaç stilleri tanımlayın.
• Sayaç stillerini uygulamak için CSS sınıflarını kullanın: Sayaç stillerini doğrudan öğelere uygulamaktan kaçının; bunun yerine, biçimlendirmeyi kontrol etmek için CSS sınıflarını kullanın.
• Sayaç stillerinizi kapsamlı bir şekilde test edin: Doğru şekilde oluşturulduklarından emin olmak için sayaç stillerinizi farklı tarayıcılarda ve cihazlarda test edin.
• Sayaç stillerinizi belgeleyin: Amaçları, biçimlendirmeleri ve kullanımları dahil olmak üzere sayaç stilleriniz için net belgeler sağlayın.
• Erişilebilirliğe öncelik verin: Sayaç stilleri oluştururken her zaman erişilebilirliği göz önünde bulundurun ve sayaç değerlerinin ekran okuyucular tarafından doğru şekilde duyurulmasını sağlamak için speak-as özelliğini kullanın.

Sonuç

CSS sayaç stilleri, web'deki numaralandırılmış içeriğin biçimlendirmesini uluslararasılaştırmak için güçlü ve esnek bir mekanizma sağlar. @counter-style kuralından ve çeşitli özelliklerinden yararlanarak, farklı bölgelerin kültürel geleneklerine ve dilsel nüanslarına saygı duyan özel numaralandırma sistemleri oluşturabilirsiniz. Bu kılavuzda özetlenen en iyi uygulamaları izleyerek, sayaç stillerinizin etkili, sürdürülebilir ve küresel bir kitle için erişilebilir olduğundan emin olabilirsiniz. Web geliştirme gelişmeye devam ettikçe, uluslararasılaştırma için CSS sayaç stillerini anlamak ve kullanmak, gerçekten kapsayıcı ve kullanıcı dostu web deneyimleri oluşturmak için giderek daha önemli hale gelecektir. CSS sayaç stillerinin gücünü benimseyin ve dünyanın her köşesinden kullanıcılarla rezonansa giren web siteleri oluşturun.

Daha Fazla Okuma

• MDN Web Docs: @counter-style
• CSS Counter Styles Level 3
• A Complete Guide to CSS Counter Styles